 :to="{path:'search_lst',query:{keyword:item}}"<template>
	<div class="search-container">



		<van-search v-model="keyword" show-action placeholder="请输入搜索关键词" @search="onSearch">

			<template #left>
				<van-icon size="20" name="arrow-left" @click="$router.back()" />
			</template>
			<template #action>
				<div @click="onSearch">搜索</div>
			</template>
		</van-search>
		<!-- 历史记录 -->
		<div class="search-history">
			<van-cell title="搜索历史">
				<div @click="clear">
					
					<span>全部删除</span>
				</div>
				<van-icon
				 name="delete" 
				 />
			</van-cell>

			<van-cell :title="item"   @click="to_serarch(item)" v-for="(item,index) in search_list">
				<van-icon @click.stop="del(index)" name="close" />
			</van-cell>
		</div>
		<!-- /历史记录 -->
	</div>
</template>

<script>
	export default {
		name: 'search',
		data() {
			let search_list = localStorage.getItem('search_list');

			return {
				keyword: '', //搜索字
				search_list: search_list?JSON.parse(search_list):[]
			}
		},
		watch:{
			search_list(){
				localStorage.setItem('search_list',JSON.stringify(this.search_list))
			}
		},
		methods: {
			clear(){
				this.$dialog.confirm({
						title: '提示',
						message: '您确定要清空历史记录吗?',
					})
					.then(() => {
						this.search_list =[]
					})
			},
			del(index){
				this.search_list.splice(index,1);
			},
			//点击跳转
			to_serarch(keyword){
				this.$router.push(`/search_list?keyword=${keyword}`)
			},
			onSearch() {
				console.log(this.keyword);
				let {
					keyword
				} = this;
				keyword = keyword.trim()
				if (keyword.length === 0) {
					this.$toast('请输入内容')
					return
				}
				let index = this.search_list.indexOf(keyword);
				if (index >= 0) {
					this.search_list.splice(index, 1)
				}
				this.search_list.unshift(keyword);
				// console.log(this.search_list);
				// localStorage.setItem('search_list',JSON.stringify(this.search_list))
				this.keyword = '';
				return
				this.$router.push(`/search_list?keyword=${keyword}`)

			}
		}
	}
</script>


<style lang="scss">
	.search-result {
		position: fixed;
		left: 0;
		right: 0;
		top: 54px;
		bottom: 0;
		overflow-y: auto;
	}
</style>
